<template>
  <view class="travel-custom">
    <!-- 表单容器 -->
    <view class="form-container">
      <view class="form-item">
        <text class="label">姓名</text>
        <input
          v-model="formData.name"
          class="input"
          placeholder="请输入姓名"
          maxlength="50"
        />
      </view>

      <view class="form-item">
        <text class="label">电话</text>
        <input
          v-model="formData.phone"
          class="input"
          placeholder="请输入手机号码"
          type="number"
          maxlength="11"
        />
      </view>

      <view class="form-item">
        <text class="label">出行日期</text>
        <picker
          mode="date"
          :value="formData.travel_date"
          @change="onDateChange"
          class="picker"
        >
          <view class="picker-text">
            {{ formData.travel_date || '请选择出行日期' }}
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">目的地</text>
        <input
          v-model="formData.destination"
          class="input"
          placeholder="请输入目的地"
          maxlength="100"
        />
      </view>

      <view class="form-row">
        <view class="form-item half">
          <text class="label">成人数</text>
          <input
            v-model="formData.adult_count"
            class="input"
            placeholder="请输入成人数"
            type="number"
          />
        </view>

        <view class="form-item half">
          <text class="label">儿童人数</text>
          <input
            v-model="formData.child_count"
            class="input"
            placeholder="请输入儿童人数"
            type="number"
          />
        </view>
      </view>

      <view class="form-item">
        <text class="label">预算</text>
        <input
          v-model="formData.budget"
          class="input"
          placeholder="请输入预算范围"
          maxlength="100"
        />
      </view>

      <view class="form-item">
        <text class="label">备注</text>
        <textarea
          v-model="formData.remark"
          class="textarea"
          placeholder="请输入其他需求或备注"
          maxlength="500"
          auto-height
        />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-container">
      <ZButton
        type="secondary"
        :disabled="submitting"
        @click="submitForm"
      >
        {{ submitting ? '提交中...' : '提交定制需求' }}
      </ZButton>
    </view>
  </view>
</template>

<script>
import ZButton from '../../components/ZButton.vue'

export default {
  components: {
    ZButton
  },
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        travel_date: '',
        destination: '',
        adult_count: '',
        child_count: '',
        budget: '',
        remark: ''
      },
      submitting: false
    }
  },
  methods: {
    onDateChange(e) {
      this.formData.travel_date = e.detail.value
    },

    validateForm() {
      if (!this.formData.name.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.phone.trim()) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
        return false
      }

      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.travel_date) {
        uni.showToast({
          title: '请选择出行日期',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.destination.trim()) {
        uni.showToast({
          title: '请输入目的地',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.adult_count || parseInt(this.formData.adult_count) <= 0) {
        uni.showToast({
          title: '请输入正确的成人数',
          icon: 'none'
        })
        return false
      }

      return true
    },

    async submitForm() {
      if (!this.validateForm()) {
        return
      }

      this.submitting = true

      try {
        // 获取当前用户信息
        const submitData = {
          ...this.formData,
          adult_count: parseInt(this.formData.adult_count),
          child_count: parseInt(this.formData.child_count) || 0,
          user_id: this.userInfo.id || null // 添加用户ID
        }

        await this.$api.createTravelCustom(submitData)

        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })

        // 延迟跳转，让用户看到成功提示
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)

      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.travel-custom {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx 30rpx;
  padding-bottom: 140rpx; /* 为底部按钮留出空间 */
}

.title {
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 40rpx;
}

.form-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-sizing: border-box;
}

.form-item {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 30rpx;

  &:last-child {
    margin-bottom: 0;
  }

  &.half {
    width: 45%
  }
}

.form-row {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
  justify-content: space-between;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.input {
  width: 100%;
  box-sizing: border-box;
  height: 80rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;

  &:focus {
    border-color: #007aff;
  }

  &::placeholder {
    color: #999;
  }
}

.picker {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  background-color: #fff;
}

.picker-text {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.textarea {
  width: 100%;
  min-height: 160rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
  resize: none;
  line-height: 1.6;

  &:focus {
    border-color: #007aff;
  }

  &::placeholder {
    color: #999;
  }
}

.submit-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx 40rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  z-index: 999;
}
</style>
